<template>
	<view class="page">
		<view class="header">
			<yzh-header :title="'活动发布'" :bgColor="'#069FC8'"></yzh-header>
			<!-- #ifdef MP-WEIXIN -->
			<image src="@/static/yzh/cat.jpg"></image>
			<!-- #endif -->
		</view>
		<view class="body">
			<uni-card>
				<view class="cardContent">
					<view class="sub">
						<u-subsection mode="subsection" :list="sub" :current="current"
							@change="subChange"></u-subsection>
					</view>
					<view class="activityS1" v-if="current==0">
						<view class="list" v-for="(item,index) in activityList" v-if="item.status==1" key="index"
							@click="toActivityD(item.id)">
							<view class="left">
								<text>{{item.title}}</text>
								<text>{{item.time}}</text>
							</view>
							<view class="right">
								<u-button type="primary" size="mini" text="下架" shape="circle"></u-button>
							</view>
						</view>
					</view>
					<view class="activityS2" v-if="current==1">
						<view class="list" v-for="(item,index) in activityList" v-if="item.status!=1 && item.status!=5"
							key="index" @click="toActivityD(item.id)">
							<view class="left">
								<text>{{item.time}}</text>
								<text v-if="item.status==2" style="color: red;">{{"审核中"}}</text>
								<text v-else-if="item.status==3" style="color: green;">{{"审核成功"}}</text>
								<text v-else-if="item.status==4" style="color: gray;">{{"审核失败"}}</text>
								<text>{{item.time}}</text>
							</view>
							<view class="right">
								<u-button type="primary" size="mini" text="删除" shape="circle"></u-button>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="btn">
			<u-button type="primary" size="large" text="发布活动" shape="circle" @click="toActivityS"></u-button>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue";
	export default {
		components: {
			'yzh-header': Header
		},
		data() {
			return {
				sub: ['已上架', '未上架'],
				current: 0,
				activityList: [{
						id: 1,
						title: "活动名称啊啊啊啊",
						status: 1,
						time: "2024-10-10 12:00"
					},
					{
						id: 2,
						title: "活动名称啊啊啊啊2",
						status: 2,
						time: "2024-10-10 12:00"
					}, {
						id: 3,
						title: "活动名称啊啊啊啊3",
						status: 3,
						time: "2024-10-10 12:00"
					}, {
						id: 4,
						title: "活动名称啊啊啊啊4",
						status: 4,
						time: "2024-10-10 12:00"
					}, {
						id: 5,
						title: "活动名称啊啊啊啊5",
						status: 5,
						time: "2024-10-10 12:00"
					}
				]
			}
		},
		methods: {
			subChange(index) {
				this.current = index;
			},
			toActivityS() {
				uni.navigateTo({
					url: "./ActivityS"
				})
			},
			toActivityD(id) {
				uni.navigateTo({
					url: "./ActivityD?id=" + id
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/yzh/cat.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 100vh;
		/* #endif */
	}

	.header {}

	.header>image {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		object-fit: fill;
	}

	.body {
		position: relative;
		margin-top: 20%;
	}

	.sub {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
	}

	.activityS1,
	.activityS2 {
		min-height: 600rpx;
	}

	.activityS1>.list,
	.activityS2>.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		padding: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
	}

	.activityS1>.list>.left,
	.activityS2>.list>.left {
		width: 90%;
		display: flex;
		flex-direction: column;
	}

	.activityS1>.list>.left>text:nth-child(1),
	.activityS2>.list>.left>text:nth-child(1) {
		color: black;
	}

	.activityS1>.list>.left>text:nth-child(2),
	.activityS2>.list>.left>text:nth-child(3) {
		font-size: 24rpx;
	}

	/* 	.activityS2>.list>.left>text:nth-child(2) {
		color: red;
	} */

	.activityS1>.list>.right,
	.activityS2>.list>.right {
		width: 10%;
		align-items: center;
		margin: auto 0;
	}
</style>